<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn () {
            return new Promise((resolve) => {
                console.log('Promise')
                fn1()
                setTimeout(() => {
                    console.log('Promise2')
                    resolve()
                    console.log('Promise3')
                }, 0);
            })
        }
        async function fn1() {
            var p = Promise.resolve().then(() => {
                console.log('Promise6')
            })
            await p.then(() => {
                console.log('Promise7')
            })  //  await在调用时整个fn1将不会往下执行，需要等待此处的Promise状态变更时才会继续执行
            console.log('end')
        }
        console.log('script') //先执行 
        setTimeout(() => {      //
            console.log('setTimeout')
        }, 0)
        fn ().then(() => {
            console.log('Promise4')
        })

        /* 
        输出结果:
        1.script 
        2.Promise
        3.Promise6
        3.Promise7
        4.end
        5.setTimeout
        6.Promise2
        7.Promise3
        8.Promise4



        代码顺序执行先执行console.log('script') 
        所以第一个结果为script

        接着到下面的异步任务
        里面有宏任务和微任务

        宏任务为setTimeout
        宏任务中的任务有
        console.log('Promise2')
        resolve()
        console.log('Promise3')

        并开始调用赋fn方法，fn调用后代码进入到上面的fn函数中执行
        在fn内的Promise函数是同步执行，所以先输出'Promise'，之后代码继续执行
        并调用fn1函数；fn1函数存在async、 await，需要等待await后的Promise状态改变后代码才会执行，
        此处的Promise为console.log('Promise6')，之后就触发await上的结果console.log('Promise7')，
        此时代码正常执行至console.log('end')；到此fn1主进程执行完毕，进行宏任务中的setTimeout；此时的
        fn ().then并不会触发，需要等待上面的resolve调用之后下面的才会执行，此时宏任务中将输出一个结果setTimeout，
        和第二个结果Promise2，输出Promise2后调用了 resolve()，改变Promise的状态，触发fn ().then，并添加到微任务
        队列中，代码继续执行并输出Promise3，此时宏任务执行完毕，后添加的微任务Promise4最后输出


        */ 
    </script>
</body>
</html>